<template>
  <div class="hotFunction" v-if="functions">
    <div
      class="hotFunctionItem"
      v-for="(item, index) in functions"
      :key="index"
      @click="toHotFunction(index)"
    >
      <div
        class="icon"
        :style="{ backgroundImage: `url(${item.model.icon})` }"
      ></div>
      <div class="title">{{ item.model.title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["functions"],
  methods: {
    toHotFunction(index) {
      // console.log(index);
      if (index == 1) {
        this.$router.push({ path: "/hotCategorie" });
      } else if (index == 2) {
        this.$router.push({ path: "/globalSelection" });
      } else if (index == 3) {
        this.$router.push({ path: "/hotMovier" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.hotFunction {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 40px;
  margin-bottom: 20px;

  .hotFunctionItem {
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-size: 100%;
      background-position: center center;
      background-repeat: no-repeat;
      margin-bottom: 10px;
    }

    .title {
      font-size: 13px;
    }
  }
}
</style>
